<template>
  <div class="register">
    <!-- 用户姓名 -->
    <div>
      <zf-input
        required
        :defaultVal="username"
        maxlength="10"
        label="姓名"
        defineLabel="width: 70px;"
        errMsg="请输入正确的姓名"
        placeholder="请输入姓名"
        @change="listenUserName"
      ></zf-input>
    </div>
    <!-- 手机号 -->
    <div>
      <zf-input
        type="tel"
        required
        :defaultVal="mobile"
        maxlength="11"
        label="手机号"
        defineLabel="width: 70px;"
        errMsg="手机号码格式错误"
        placeholder="请输入手机号码"
        @change="listenMobile"
      ></zf-input>
    </div>
    <!-- 密码 -->
    <div>
      <zf-input
        type="password"
        required
        label="密码"
        :defaultVal="password"
        defineLabel="width: 70px;"
        maxlength="20"
        errMsg="请输入正确的密码"
        placeholder="请确认密码,6～20位数字+字母组合"
        @change="listenPwd"
      ></zf-input>
    </div>
    <!-- 确认密码 -->
    <div>
      <zf-input
        type="password"
        required
        label="确认密码"
        :defaultVal="password2"
        defineLabel="width: 70px;"
        maxlength="20"
        errMsg="请输入正确的密码"
        placeholder="请确认密码,6～20位数字+字母组合"
        @change="listenPwd2"
      ></zf-input>
    </div>
    <!-- 图形验证码 -->
    <!-- <div>
      <zf-input
        required
        maxlength="4"
        defineLabel="width: 90px;"
        label="图形验证码"
        useSlot
        placeholder="请输入图形验证码"
        @change="listenPicCode"
      >
        <div class="picCode" @click="changeImg">
          <img :src="picImg" alt="">
        </div>
      </zf-input>
    </div> -->
    <!-- 验证码 -->
    <div>
      <zf-input
        type="code"
        required
        label="验证码"
        :sendSuc.sync="identify"
        @changcode:status="changeStatus"
        defineLabel="width: 70px;"
        maxlength="6"
        @sendc="sendCode"
        placeholder="请输入验证码"
        errMsg="请输入正确的验证码"
        @change="listenCode"
      ></zf-input>
    </div>
    <!-- 邀请码 -->
    <div>
      <zf-input
        label="邀请码"
        ref="code"
        defineLabel="width: 70px;"
        type="invitation"
        maxlength="20"
        required
        useSlot
        placeholder="请输入邀请码"
        errMsg="请输入正确的邀请码"
        @change="listenYqCode"
      >
        <van-button size="small" style="width:auto;" type="primary" :class="!InvitationSendSuc ? 'mainColor' : 'disableInvitation'" @click="getInvitationCode">获取邀请码</van-button>
      </zf-input>
    </div>
    <div class="rules">
      <van-checkbox
        v-model="checked"
        shape="square"
        icon-size="14px"
        checked-color="#FF5507"
      ></van-checkbox>
      <p class="text">我已阅读并同意<span @click="registerRule" class="mainColor">《注册协议》</span></p>
    </div>
    <div :class="disabled ? 'submit mainBgColor' : 'disableSubmit disBgColor'" @click="submit">注册</div>
  </div>
</template>

<script>
import { Checkbox, Toast, Button } from 'vant'
import Input from '@/components/Input'
export default {
  data() {
    return {
      picImg: '',
      userCode: '081KUQFa1csboA0yJ1Ia1jtkf03KUQF8',
      openId: '',
      username: '',
      nameSuccess: false,
      mobile: '',
      identify: false,
      mobileSuccess: false,
      password: '',
      passwordSuccess: false,
      password2: '',
      passwordSuccess2: false,
      picCode: '',
      picCodeSuccess: false,
      code: '',
      codeSuccess: false,
      InvitationCode: '', // 邀请码
      InvitationSendSuc: false, // 邀请码是否发送成功
      InvitationCodeSuccess: false,
      checked: false, // 是否勾选注册协议
    }
  },
  computed: {
    disabled() {
      let {nameSuccess, mobileSuccess, passwordSuccess, passwordSuccess2, codeSuccess, InvitationCodeSuccess, checked} = this
      return nameSuccess && mobileSuccess && passwordSuccess && passwordSuccess2 && codeSuccess && InvitationCodeSuccess && checked ? true : false
    }
  },
  components: {
    zfInput: Input,
    [Checkbox.name]: Checkbox,
    [Button.name]: Button
  },
  created() {
    this.mobile = this.$route.params.mobile ? this.$route.params.mobile : ''
    this.changeImg()
    // this.GetCode()
  },
  methods: {
    // 图形验证码
    listenPicCode(e) {
      this.picCode = e.value
      this.picCodeSuccess = e.isSuccess
    },
    changeImg() {
      this.picImg = process.env.VUE_APP_BASE_URL + '/createImg?hash=' + new Date().getTime()
    },
    submit () {
      if (!this.disabled) return
      if (this.password !== this.password2) {
        Toast('两次输入的密码不一致!')
        return
      }
      let params = {
        name: this.username,
        openId: this.openId,
        phone: this.mobile,
        password: this.password,
        repassword: this.password2,
        smsCode: this.code,
        invitationCode: this.InvitationCode
      }
      this.$http.register(params).then(res => {
        this.$toast(res.data.message)
        setTimeout(() => {
          this.$router.push({name: 'login', params: {mobile: this.mobile, password: ''}})
        }, 1500)
      }).catch(err => {
        this.$toast(err.data.message)
        console.log(err)
      })
    },
    sendCode() {
      if (!this.username.length) {
        this.$toast('请输入用户姓名')
        return
      }
      if (!this.mobile.length) {
        this.$toast('请输入手机号码')
        return
      }
      if (!this.password.length) {
        this.$toast('请补全密码')
        return
      }
      if (!this.password2.length) {
        this.$toast('请补全密码')
        return
      }
      if (this.password !== this.password2) {
        this.$toast('两次输入的密码不一致!')
        return
      }
      this.$http.sendCode({phone: this.mobile, type: 2, openId: this.openId}).then(res => {
        if (res.data.code === 200) {
          this.$toast(res.data.message)
          this.identify = true
        }
      }).catch(err => {
        this.$toast(err.data.message)
        console.log(err, 'err')
      })
    },
    // 重新发送
    changeStatus(e) {
      this.identify = e.value
    },
    // 用户姓名
    listenUserName(e) {
      this.username = e.value
      this.nameSuccess = e.isSuccess
    },
    // 手机号码
    listenMobile(e) {
      this.mobile = e.value
      this.mobileSuccess = e.isSuccess
    },
    // 密码
    listenPwd(e) {
      this.password = e.value
      this.passwordSuccess = e.isSuccess
    },
    // 二次密码
    listenPwd2(e) {
      this.password2 = e.value
      this.passwordSuccess2 = e.isSuccess
    },
    // 邀请码
    listenYqCode(e) {
      this.InvitationCode = e.value
      this.InvitationCodeSuccess = e.isSuccess
    },
    // 验证码
    listenCode(e) {
      this.code = e.value
      this.codeSuccess = e.isSuccess
    },
    // 获取邀请码
    getInvitationCode(e) {
      if (!this.username.length) {
        this.$toast('请输入用户姓名')
        return
      }
      if (!this.mobile.length) {
        this.$toast('请输入手机号码')
        return
      }
      if (this.InvitationSendSuc) return
      this.$http.getInvitationCode({phone: this.mobile, openId: this.openId, name: this.username}).then(res => {
        this.$toast(res.data.message)
        this.InvitationSendSuc = true
      }).catch(err => {
        this.$toast(err.data.message)
        console.log(err)
      })

    },
    // 注册协议
    registerRule() {
      this.$router.push({name: 'register-rule'})
    },
    // 获取code
    GetCode() {
      const code = this.GetUrlParam()
      let redirect_url = encodeURIComponent(process.env.VUE_APP_WEB_URL + 'register')
      if (!code.length) {
        console.log('跳转获取code')
        window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx5a72628d0ed3743a&redirect_uri=${redirect_url}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`
      } else {
        console.log(code, 'code')
        this.userCode = code
        this.getOpenId()
      }
    },
    // 获取openid
    getOpenId() {
      this.$http.getOpenId({code: this.userCode}).then(res => {
        console.log(res.data, 'openId')
        this.openId = res.data.result
      })
    },
    GetUrlParam() {
      let url = window.location.href
      if( url.indexOf("?") != -1 ) {
        let str = url.substr(url.indexOf('?')+1)
        let arr = str.split('&')
        let code = ''
        for (let i = 0; i < arr.length; i++) {
            if (arr[i].indexOf('code') != -1) {
              code = arr[i].split('=')[1]
            }
        }
        return code.length ? code : ''
      } else {
        return ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .register {
    color: #333;
    padding: 0px 16px;
    box-sizing: border-box;
    position: relative;
    .rules {
      margin-top: 8px;
      height: 20px;
      display: flex;
      align-items: center;
      .text {
        margin-left: 8px;
        font-size: 14px;
      }
    }
    .picCode {
      width:80px;
      height: 30px;
      position: absolute;
      right: 0px;
      top: 0px; bottom: 0px;
      margin: auto;
    }
    .disableInvitation {
      color: #c8c9cc;
    }
    .submit {
      width: 100%;
      height: 44px;
      margin-top: 23px;
      font-size: 16px;
      color: #fff;
      text-align: center;
      line-height: 44px;
      border-radius: 2px;
    }
    .disableSubmit {
      width: 100%;
      height: 44px;
      margin-top: 23px;
      font-size: 16px;
      color: #fff;
      text-align: center;
      line-height: 44px;
      border-radius: 2px;
    }
  }
</style>
<style lang="scss">
  .register {
    .van-cell {
      padding-left: 0px;
      padding-right: 0px;
    }
    .van-field__label {
      width: 60px;
    }

  }
</style>
